<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="__PUBLIC__/asset/css/common.css">
    <link href="__PUBLIC__/asset/css/animate.css" rel="stylesheet" type="text/css" media="all">
    <link href="__PUBLIC__/asset/lib/bootstrap/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <title>{:L('news_title')}</title>
    <style>
        .news-box .row {
            margin: 0 auto;
            position: relative;
        }

        /* nav列表 */
        .news-nav {
            background-color: #f7f7f7;
        }

        /* .news-nav-list {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            padding: 3vh 0;
        } */
        .news-nav-list {
            display: flex;
            flex-wrap: nowrap;
            width: 100%;
            overflow-x: auto !important;
            padding: 3vh 0;
            /* grid-template-columns :repeat(7,30vw) */
        }

        .news-item {
            margin-right: 30px;
        }

        .news-item:nth-child(1) {
            margin-right: 60px;
        }

        .news-nav-item {
            border: 1px solid black;
            color: black;
            border-radius: 20px;
            width: fit-content;
            padding: 0 0.5vw;
            min-width: 45%;
            text-align: center;
            font-size: calc(16px + 0.1vw);
            cursor: pointer;
            transition: all .3s;
            min-width: 4vw;
            white-space: nowrap;
        }

        .news-nav-item:hover,
        .news-item .news-now-item {
            color: white;
            background-color: var(--themeColor);
            border-color: var(--themeColor);
        }

        /* 底部产品列表 */
        .news-list {
            width: 100%;
            position: relative;
        }


        .news-right {
            position: relative;
            padding-left: 50px;
        }

        .news-list-item {
            border-bottom: 1px solid #e4e4e4;
            padding: 5vh 0;
        }

        .news-item-tag {
            background-color: black;
            color: white;
            font-size: calc(14px + 0.1vw);
            width: fit-content;
            padding: 2px 4px;
        }

        .news-item-title {
            font-size: calc(30px + 0.1vw);
            margin: 20px 0;
        }

        .news-item-info,
        .news-time {
            font-size: calc(14px + 0.1vw);
            color: #757575;
        }

        .news-time {
            text-align: right;
        }

        .news-item-btn {
            margin: 20px 0 0 !important;
        }

        .news-more-btn {
            padding: 0;
        }

        .news-item-btn img {
            width: 3vw;
            max-width: 150px;
            transition: all .3s;
        }

        .news-item-btn:hover img {
            margin-left: 20px;
        }

        @media screen and (max-width:1400px) {
            .news-nav-list {
                width: 100%;
                padding-left: 20px;
                padding-right: 20px;
            }

            .news-nav {
                /* padding: 0 20px; */
            }

            .news-list .middle-box {
                padding: 0 20px;
            }
        }

        @media screen and (max-width:768px) {
            .news-item-btn img {
                width: 50%;
            }

            .news-pagination {
                margin: 5vh 0;
            }

            .news-box {
                margin-top: 7rem;
            }

            .news-list {
                margin-top: 0;
            }

            .news-right {
                padding: 0;
            }

            .news-nav {}

            .news-item {
                width: 30vw;
                flex: 0 0 auto;
                margin-right: 10px;
            }

            .news-nav-item {
                width: 100%;
                padding: 4px 0;
                min-width: none;
                font-size: calc(14px + 0.1vw);
            }

            /* .news-nav-item:hover {
                color: black;
                border-color: black;
                background-color: transparent;
            } */
        }

        .news-nav-list::-webkit-scrollbar {
            height: 4px;
        }

        .news-nav-list::-webkit-scrollbar-thumb {
            background-color: var(--themeColor);
        }

        .news-nav-list::-webkit-scrollbar-track {
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="news-box">
        <div class="common-top wow fadeInUp">
            <img src="__PUBLIC__/asset/image/news/top.jpg" alt="">
        </div>
        <div class="news-nav">
            <div class="news-nav-list middle-box wow fadeInUp">
            </div>
        </div>
        <div class="news-list">
            <div class="middle-box">
                <div>
                    <div class="news-page-list">
                        <div class="page-list-content">
                            <volist name="posts" id="vo">
                                <div class="news-list-item wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
                                    <div class="news-item-tag">{$vo.tag}</div>
                                    <div class="news-item-title">{$vo.title}</div>
                                    <div class="news-item-info">{$vo.info}</div>
                                    <div class="news-item-btn row">
                                        <div class="news-more-btn col-lg-2 col-xs-4 col-sm-3">
                                            <a href="{:U('message/details',['type'=>'news','key'=>$vo['id']])}"> <i class="iconfont icon-youjiantou- frist-icon"></i> </a>
                                        </div>
                                        <div class="news-time  col-lg-2 col-lg-offset-8 col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-5">
                                            {$vo.time}
                                        </div>
                                    </div>
                                </div>
                            </volist>
                        </div>
                        <div class="pagenation-main"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer"></div>
</body>

</html>
<script src="__PUBLIC__/asset/lib/wow/wow.min.js"></script>
<script src="__PUBLIC__/asset/lib/jquery_3.2.1.min.js"></script>
<script src="__PUBLIC__/asset/lib/bootstrap/bootstrap.js"></script>
<script src="__PUBLIC__/asset/js/common.js"></script>
<script src="__PUBLIC__/asset/js/help.js?page=5"></script>
<script>
    new WOW().init()
    $(document).ready(function () {
        var classList = '{$cates}'
        if(classList != ''){
            classList = JSON.parse(classList)
        }else{
            classList = []
        }

        function changeNav() {
            let cate = '{:I("cate")}'

            $('.news-nav-item').each(function () {
                let id = $(this).data('id')
                if (cate == id) {
                    $(this).addClass('news-now-item')
                } else {
                    $(this).removeClass('news-now-item')
                }
            })
        }
        function bindNav() {
            $('.news-nav-item').each(function () {
                let _this = this
                $(_this).on('click', function () {
                    let id = $(this).data('id')
                    window.location.href = "/news-index-cate-"+id;
                    // changeNav(id)
                })
            })
        }
        function setList() {
            let navDome = ''
            let dome = ''
            classList.forEach((item, index) => {
                navDome += `
                 <div class="news-item">
                    <div class="news-nav-item ${index ? '' : 'news-now-item'}" data-id="${item}">${item == 'all' ? 'All' : item}</div>
                </div>`
            })

            $('.news-nav-list').append(navDome)
            setTimeout(() => {
                changeNav()
                bindNav()
            }, 300);
        }
        setList()
    })

    $(function () {
        $('.pagenation-main').load('../public-pagenation.html?type=news&maxpage={$maxpage}&page={:I("page",1)}');
    });
</script>